<template>
	<div class="page">
		<div class="page-content u-row-center u-p-0">
			<div class="userinfo u-flex u-row-center">
				<div class="avatar" @click.stop="handleImg">
					<u-avatar size="large" :src="formUser.avatar"></u-avatar>
					<image class="camera"   src="../../../src/static/images/user_detail_camera.png" mode="widthFix" >
					</image>
				</div>
			</div>

            <view class="userinfo-rows">
                <u-cell-item :border-top="false" :border-bottom="false"  class="userinfo-row" title="昵称" :arrow="true" arrow-direction="right">
                    <u-input v-model="formUser.nickname" type="text" input-align="right" placeholder=''/>
                </u-cell-item>
                <u-cell-item :border-top="false" :border-bottom="false"  class="userinfo-row" title="生日" :arrow="true" arrow-direction="right">
                    <u-input
                        v-model="formUser.birth"
                        type="text"
                        @click="isBirthdayShow = true"
                        placeholder=""
                        input-align="right"
                        placeholder-style="placeholderStyle"
                        :clearable="false"
                    />
                    <u-picker mode="time" v-model="isBirthdayShow" @confirm="handlePicker"></u-picker>
                </u-cell-item>
                <u-cell-item :border-top="false" :border-bottom="false"  class="userinfo-row" title="邀请码" :arrow="true" arrow-direction="right" style="position: relative;">
                    <u-input v-model="formUser.yqm" type="text" input-align="right" class="yzm" placeholder='选填'/>
                </u-cell-item>
            </view>

			<div class="next" @click="handleNext">下一步</div>
		</div>

        <div class="avatar_upload" @click.stop="">
            <uploadView
                uploadText=""
                ref="avatar"
                moduleName="avatar"
                :maxCount="9"
                :fileList="avatarList"
                @onChange="handleUploadChange"
                @onPreview="handleUploadPreview"
                @onRemove="handleUploadRemove"
                class="avatar_upload"
                fileType="img"
                :width="1"
                :height="1"
            >
            </uploadView>
        </div>
	</div>
</template>

<script>
    import uploadView from '@/components/yl-uploadView'
	export default {
		name: '', // 页面名称
		components: {uploadView}, // 挂载组件
		props: {}, // 组件传值
		data() {
			return {
                avatarList: [], // 头像预览
                isBirthdayShow:false,
				src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
                formUser:{
                    nickname:'',
                    avatar:'',
                    gender:0,
                    yqm: '',
                    birth:''
                }
			}
		},
		computed: {}, // 计算机属性 类似与data概念
		watch: {}, // 监控data中数据变化
		created() {}, // 生命周期-创建完成(可以访问当前this实例)
		mounted() {}, // 生命周期-挂载完成(可以访问DOM元素)
		methods: {
		    // 保存用户资料
            handleNext(){
                console.log('userInfo',this.formUser)
                this.formUser.icon = this.formUser.avatar
                this.formUser.inviteCode = this.formUser.yqm
                delete this.formUser.avatar
                delete this.formUser.yqm
                this.$u.api.PostUpdateInfo(this.formUser).then((res) => {
                    this.$toast('修改资料成功')
                    setTimeout(() => {
                        uni.reLaunch({
                            url: '/pages/index/index',
                        })
                    }, 2000)
                })
            },
            handlePicker(options) {
                const { year, month, day } = options
                const birth = year + '-' + month + '-' + day
                this.formUser.birth = birth
            },
            handleImg() {
                // this.handleUploadRemove({ moduleName: 'avatar' })
                this.$refs.avatar.$refs.uUpload.selectFile()
            },
            /**
             * @author: yilingsj（315800015@qq.com）
             * @description: 上传后触发
             * @param {type}
             * @return:
             * @Date: 2020-07-20 10:43:06
             */
            handleUploadChange(options) {
                console.log(options, '引用后上传结束')
                const { res, index, lists, moduleName } = options
                const data = JSON.parse(res.data)
                if (moduleName === 'avatar') {
                    this.formUser.avatar = data.data
                    this.avatarList = [{ url: data.data }]
                }
                console.log('this.avatarList',this.avatarList)
            },
		}, // 挂载一些方法
		onLoad(options) {
		    this.formUser = Object.assign({},this.$store.state.user.regUser)
        }, // 生命周期回调—监听页面加载
		onShow() {}, // 生命周期回调—监听页面显示
		onReady() {}, // 生命周期回调—监听页面初次渲染完成
		onHide() {}, // 生命周期回调—监听页面隐藏
		onUnload() {}, // 生命周期回调—监听页面卸载
	}
</script>

<style lang="scss" scoped>
	uni-page-body,
	page,
	html {
		font-family: FZHei-B01S;
		height: 100%;
	}

	.page {
        position: relative;
        color: #FFFFFF;
        width: 100%;
        height: 100vh;
        background-image: url(/static/img/home_bg.ee2bc89f.png);
        background-size: cover;
        background-repeat: no-repeat;
        padding: 18px 15px 0;
	}

	.page-content {
		position:relative;
		padding: 50rpx !important;
	}

	.userinfo {
		margin-top: 100rpx;

		.u-avatar {
			background: #FFFFFF !important;
			width: 180rpx !important;
			height: 180rpx !important;
		}

		&>.avatar {
			position: relative;

			&>.camera {
				position: absolute;
				bottom: 2px;
				right: -5rpx;
				width: 50rpx;
			}
		}
	}

	.yqm {
		width: 90rpx;
		position: absolute;
		right:70rpx;
		bottom: 20rpx;
	}
    .uni-input-input{
        color:#ffffff!important;
    }
	.userinfo-rows{
        color:#ffffff!important;
		margin-top: 120rpx;
        background-color: transparent!important;
	}

    .u-cell{
        background-color:transparent!important;
        color:#ffffff!important;

        .uni-input-placeholder{
            color:#ffffff!important;
        }
    }

	.u-cell-item-box .u-border-bottom .u-border-top{
		background: transparent!important;
	}
	.next{
		width: 360rpx;
		line-height: 90rpx;
		background: #FCC307;
		border-radius: 45px;
		text-align: center;
		margin: 300rpx auto 0;

	}
    .uni-input-wrapper{
        color: #ffffff!important;
    }
</style>
